<template>
  <canvas ref="canvas" id="canvas"></canvas>
  <div id="login">
    <h1>欢迎来到个人博客后台</h1>
    <main>
      <div class="inputBox">
        <el-input
          style="width: 300px"
          v-model="name"
          placeholder="username"
          autofocus
        />
      </div>
      <div class="inputBox">
        <el-input
          type="password"
          style="width: 300px"
          v-model="password"
          placeholder="password"
        />
      </div>
      <div class="inputBox">
        <span @click="loginUser">--login--</span>
      </div>
      <div class="text">
        <span>人生本来也就短，我们要及时行乐，天天开心噢</span>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
import { loginTo } from "@/api/serverRequest";
import { ElMessage } from "element-plus";
import { myStore } from "@/stores/bigFruit";
import "element-plus/theme-chalk/el-message.css";
export default defineComponent({
  name: "LoginAdmin",
  props: {},
  components: {},
  setup(props, content) {
    let router = useRouter();
    let name = ref("");
    let store = myStore();
    let password = ref("");
    function loginUser() {
      loginTo(name.value, password.value).then((response) => {
        if ((response ? response.data.status : "") === 200) {
          store.userToken = response ? response.data.token : "";
          setStorageToken();
          ElMessage({
            message: "登陆成功欢迎您的进入！",
            type: "success",
          });
          router.push("/home");
        } else {
          ElMessage.error("登入失败，用户名或者密码错误！");
        }
        name.value = "";
        password.value = "";
      });

      function setStorageToken() {
        store.setStorageToken();
      }
    }
    return {
      loginUser,
      name,
      password,
    };
  },
});
</script>

<style scoped lang="scss">
@import "@/style/mixin.scss";
#login {
  margin-top: 5rem;
  main {
    .inputBox {
      margin-top: 1.5rem;
      span {
        font-size: 1.2rem;
        cursor: pointer;
        &:hover {
          color: $backColor;
        }
      }
    }
    .text {
      margin-top: 1.5rem;
      span {
        font-size: 0.6rem;
      }
    }
  }
}
#canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
